<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-sclae=1.0,user-scalable=0">
	<link rel="shortcut icon" href="data:;base64,=">
	<title>自写jquery-H5</title>
	<link rel="stylesheet" type="text/css" href="css/base.css">
	<style>
		*{margin: 0;padding: 0;font-family: microsoft yahei;}
		a{text-decoration: none;outline: none;}
		ul,li{list-style: none;}
		ul{width: 90%;margin: 20px auto;}
		li{padding: 10px 0;border-bottom: 1px solid #aaa;}
		.btn{display:inline-block;padding:0 18px;height:35px;line-height:35px;background:#009688;color:#fff;font-size:15px;opacity:0.9;filter:alpha(opacity=90);font-family:'microsoft yahei';cursor:pointer;vertical-align:middle;border-radius:2px;border: none;outline: none;text-decoration: none;margin: 10px 0;}
		.btn:hover{opacity:1;filter:alpha(opacity=100);}
		.btn:active{opacity:0.9;filter:alpha(opacity=90);}
		p{text-align: center;}
	</style>
</head>
<body>
	<ul style="display: none;">
		<li>第一个</li>
		<li>第二个</li>
		<li>第三个</li>
	</ul>
	<p>
		<a href="javascript:;" class="btn" id="add">添加</a>
		<a href="javascript:;" class="btn" id="remove">删除</a>
		<a href="javascript:;" class="btn" id="slide">slide动画</a>
	</p>
	<p><a href="javascript:;" class="btn" id="ajax">ajax加载</a></p>
	<script src="js/app.js"></script>
	<p><a href="javascript:;" class="btn" onclick="app.download()">下载app</a></p>
	<script src="js/h5.js"></script>
	<script>
		$('ul').show()
		$('ul').append($('li'))
		var ul=$('ul'),hei=ul.css('height')+3;
		ul.css({height:hei,overflow:'hidden'});
		console.log('空格：'+'  121 '+','+$.trim('  121 '))
		console.log('获取父级：'+ul.parent().parent())
		$('li').each(function(){
			$(this).css({'border-bottom':'1px solid #f40'});
		})
		$('li').eq(0).siblings().css({'border-bottom':'1px solid blue'})
		$('#remove').prev().click(function(){
			$('li').css({width:200})
			$('li').eq(0).animate({width:'400px'})
			$('ul').append('<li style="width:200px">增加一个</li>');
			ul.css({height:'auto'})
			hei=ul.css('height')
			ul.css({height:hei,overflow:'hidden'});
		})
		$('#remove').click(function(){
			$('li').eq($('li').length-1).remove();
		})
		$('#remove').next().click(function(){
			if(!ul.css('height')==0){
				ul.animate({height:0})
			}else{
				ul.animate({height:hei})
			}
		})
		$('li').css({'width':'200px','height':'20px'})
		$(function(){
			console.log('文档加载完：'+'ready最后加载');
		})
		function fn (res) {
			var d=res.data,txt='',isExist=true;
	        for (var i = 0; i < d.length; i++) {
	        	txt=txt+d[i].name+'<br>'
	        }
	        $('#ajax').on('click',function(){
	        	if(isExist){
					$('body').append("<div style='color:#999'>"+txt+"</div>");
					isExist=false;
	        	}
			})
	  	}
		$.get('json.txt',{
			timestamp:new Date().getTime()
		}).then(fn)
	</script>
</body>
</html>